<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>蓝牙选择项目</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  <style>
    .container {
      position: absolute;
      left: 50%;
      margin-left: -100px;
      top: 120px;

    }

    .item {
      margin-top: 15px;
    }

    .common {
      min-width: 200px;
      height: 40px
    }

    .tip {
      color: red;
    }

  </style>
</head>
<body>
<div class="container">

  <div class="form-group">
    <label>信标收集方式</label>
    <select class="form-control " id="collection_method" style="width: 200px">
      <option value="">--请选择--</option>
      <option value="one" {{ "selected" if collection_method=="one" }}>单个信标</option>
      <option value="more" {{ "selected" if collection_method=="more" }}>多个信标</option>
    </select>
  </div>


  <div class="form-group">
    <label>选择要收集的信标</label>
    <select class="form-control " id="current_mac" style="width: 200px">
      {% for mac in macs %}
        <option value="{{ mac }}" {{ "selected" if current_mac==mac }}>{{ mac }}</option>
      {% endfor %}
    </select>
  </div>


  <div class="form-group item">
    <label for="distance">设置信标距离</label>
    <input type="text" id="distance" class="form-control" style="width: 200px" id="distance" placeholder="选择信标距离"
           value="{{ distance }}">
  </div>

  <div class="item">
    <button class="btn btn-info" id="btn-info">{{ "停止扫描" if is_collection else "开始扫描" }}</button>
    <button class="btn btn-primary" id="btn-primary">更新参数</button>
  </div>
  <p class="tip item" id="tip">{{ "扫描中..." if is_collection else "已暂停" }}</p>
</div>

<script>

  // 扫描开关
  $("#btn-info").click(function () {
    is_collection = $(this).text() === "开始扫描"
    distance = $("#distance").val()
    current_mac = $("#current_mac").val()
    data = {
      "is_collection": is_collection,
      "distance": distance,
      "current_mac": current_mac
    }
    $.post("/api/v1/scanner", data, function (res) {
      if (res.code === 0) {
        if ($("#btn-info").text() === "开始扫描") {
          $("#tip").text("扫描中...")
          $("#btn-info").text("停止扫描")
        } else {
          $("#tip").text("已暂停")
          $("#btn-info").text("开始扫描")
        }

      } else {
        alert("错误!")
      }
    }, "json")

  })


  // 选择信标收集方式
  $("#collection_method").change(function () {
    collection_method = $("#collection_method").val()
    data = {
      "collection_method": collection_method,
    }
    $.post("/api/v1/modify_collection_method", data, function (res) {
      if (res.code === 0) {
        alert("更新成功!")
      } else {
        alert("错误!")
      }
    }, "json")
  })


  // 更新扫描的信息
  $("#btn-primary").click(function () {
    distance = $("#distance").val()
    current_mac = $("#current_mac").val()
    data = {
      "distance": distance,
      "current_mac": current_mac
    }
    $.post("/api/v1/update_scanner", data, function (res) {
      if (res.code === 0) {
        alert("更新成功!")
      } else {
        alert("错误!")
      }
    }, "json")
  })
</script>

</body>
</html>